<template>
  <DataManipulation
    style="margin: 0 20px 0 13px"
    title="添加员工信息"
    formRef="addUserRef"
    :formList="formList"
    :form="form"
    :rules="rules"
    :buttonList="buttonList"
    @verifiedPassed="submitForm"
  />
</template>

<script>
import { listDept } from "@/api/system/dept";
import { addUser } from "@/api/system/user";
import { listRole } from "@/api/system/role";
export default {
  data() {
    const validateInputContent = (rule, value, callback) => {
      const regex =
        /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]).+$/;
      const startsWithCapital = /^[A-Z]/;
      if (!value) {
        callback(new Error("请输入内容"));
      } else if (!startsWithCapital.test(value)) {
        callback(new Error("首字母必须大写"));
      } else if (!regex.test(value)) {
        callback(new Error("内容必须包含小写字母、数字和特殊符号"));
      } else {
        callback();
      }
    };
    return {
      form: {
        deptId: "",
        nickName: "",
        password: "Manage@123!",
        phonenumber: "",
        roleIds: [],
        sex: 0,
        status: 0,
        userName: "",
      },
      formList: [
        {
          labelList: [
            {
              label: "员工姓名",
              prop: "nickName",
              type: "el-input",
              span: 8,
              labelWidth: "108px",
              components: {
                placeholder: "请输入",
              },
            },
            {
              label: "员工密码",
              prop: "password",
              span: 8,
              type: "el-input",
              labelWidth: "108px",
              components: {
                placeholder: "请输入",
              },
            },
            {
              label: "手机号码",
              prop: "phonenumber",
              span: 8,
              type: "el-input",
              instruction: "number",
              labelWidth: "108px",
              components: {
                placeholder: "请输入",
              },
            },
          ],
        },
        {
          labelList: [
            {
              label: "分配角色",
              prop: "roleId",
              span: 8,
              type: "el-select",
              labelWidth: "108px",
              components: {
                placeholder: "请选择",
                option: {
                  key: "roleId",
                  label: "roleName",
                  value: "roleId",
                  list: [],
                },
              },
            },
            {
              label: "所属部门",
              prop: "deptId",
              type: "el-select",
              span: 8,
              labelWidth: "108px",
              components: {
                placeholder: "请选择",
                option: {
                  key: "deptId",
                  label: "deptName",
                  value: "deptId",
                  list: [],
                },
              },
            },
            {
              label: "性别",
              prop: "sex",
              type: "el-select",
              span: 8,
              labelWidth: "108px",
              components: {
                placeholder: "请选择",
                option: {
                  key: "value",
                  label: "label",
                  value: "value",
                  list: [
                    { label: "女", value: 0 },
                    { label: "男", value: 1 },
                  ],
                },
              },
            },
          ],
        },
      ],
      rules: {
        nickName: [
          { required: true, message: "员工姓名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "员工密码不能为空", trigger: "blur" },
          { required: true, validator: validateInputContent, trigger: "blur" },
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        roleId: [
          { required: true, message: "分配角色不能为空", trigger: "change" },
        ],
        deptId: [
          { required: true, message: "所属部门不能为空", trigger: "change" },
        ],
      },
      buttonList: [
        {
          text: "取消",
          methods: this.Cancel,
        },
      ],
    }; //这里存放数据
  },
  components: {}, //import引入的组件需要注入到对象中才能使用
  computed: {}, //监听属性 类似于data概念
  watch: {}, //监控data中的数据变化
  methods: {
    //获取部门列表
    getDeptList() {
      listDept().then((res) => {
        this.formList[1].labelList[1].components.option.list = res.data;
      });
    },
    //获取角色列表
    getRoleList() {
      listRole().then((res) => {
        this.formList[1].labelList[0].components.option.list = res.rows
          .filter((item) => item.status == 0)
          .filter((item) => item.roleId !== 1);
        console.log(this.formList[1].labelList[0].components.option.list);
      });
    },
    //取消方法
    Cancel() {
      this.$router.go(-1);
    },
    //提交方法
    submitForm() {
      this.form.userName = this.form.phonenumber;
      console.log(this.form);
      this.form.roleIds = this.form.roleId;
      this.form.roleIds = Array.of(this.form.roleIds);
      addUser(this.form).then((response) => {
        this.$modal.msgSuccess("新增成功");
        this.Cancel();
      });
    },
  }, //方法集合
  created() {}, //生命周期 - 创建完成(可以访问当前this实例)
  mounted() {
    this.getDeptList();
    this.getRoleList();
  }, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped></style>
